<template>
    <BaseTable ref="baseTableRef" :data="data" :columns="columns" :config="config"></BaseTable>
    <n-button @click="onBtn">获取选中的值
    </n-button>
    <n-button @click="onReset">重置</n-button>
</template>
<script lang="ts" setup>
import { h, onMounted } from 'vue'
import { NButton } from 'naive-ui'
import BaseTable from '@/components/BaseTable/index.vue'
import { getTableList } from '@/mock/local'
import XEUtils from 'xe-utils';
const sourceD = getTableList({
    page_num: 1,
    page_size: 10
}).items
const data = sourceD || []
const columns = ref([
    {
        type: 'selection',
        // multiple: false
    },
    {
        title: '名称',
        key: 'name'
    },
    {
        title: '价格',
        key: 'price',
        filterMultiple: false,
        filterOptionValue: 1,
        
        filterOptions: [
            {
                label: '1',
                value: 1
            },
            {
                label: '2',
                value: 2
            }
        
        ], filter:true
    },
    {
        title: '总数',
        key: 'count',
        filterControlType:'input',
        filter:true,
        filterControl: {
            type:'input',
            value:3
        },
    },
    {
        title: '创建时间',
        key: 'time',
        filter:true,
        filterControlType:'date',
        filterControl: {
            type:'date',
            value:+new Date()
        },
        formateHtml:(row:any)=>{
            return `${XEUtils.toDateString(row.time) }`
        }
    },
    {
        title: '创建时间1',
        key: 'createTime',
        filter:true,
        filterControlType:'date',
        filterControl: {
            type:'daterange',
            value:[+new Date(),+new Date('2024/09/10')]
        },
        formateHtml:(row:any)=>{
            return `${XEUtils.toDateString(row.createTime) }`
        }
    },
    {
        title: '操作',
        key: 'actions',
        actionsList: [{
            text: 'Play',
            onClick: (row) => {
                console.log('play', row)
            }
        }]
    }
])
const config = ref({
    pageKey: 'page_num',
    sizeKey: 'page_size',
    apiFunc: (q) => {
        console.log('q', q)
        return new Promise((resolve) => {
            setTimeout(() => {
                resolve(getTableList(q))
            }, 1000)
        })
    }

})
const baseTableRef = ref()
onMounted(() => {
    baseTableRef.value.onSearch()
    baseTableRef.value.setSelect([6, 4, 16])
})
const onBtn = () => {
    console.log(baseTableRef.value.getSelect())
}
const onReset = () => {
    baseTableRef.value.onReset()
    columns.value[2].filterOptionValue = null
}

</script>
